<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="/css/element/index.css" />
	<link rel="stylesheet" href="/lib/qunit/qunit.css" />
	<link rel="stylesheet" href="/themes/default/default.css" />
	<script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/element/index.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/ajax/libs/layer/layer.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/common/js/ms-ui.js" type="text/javascript" charset="utf-8"></script>


	<script src="/lib/qunit/qunit.js"></script>
	<!-- include src files -->
	<script src="/src/core.js"></script>
	<script src="/src/config.js"></script>
	<script src="/src/ajax.js"></script>
	<script src="/src/event.js"></script>
	<script src="/src/html.js"></script>
	<script src="/src/selector.js"></script>
	<script src="/src/node.js"></script>
	<script src="/src/range.js"></script>
	<script src="/src/cmd.js"></script>
	<script src="/src/widget.js"></script>
	<script src="/src/edit.js"></script>
	<script src="/src/toolbar.js"></script>
	<script src="/src/menu.js"></script>
	<script src="/src/colorpicker.js"></script>
	<script src="/src/uploadbutton.js"></script>
	<script src="/src/dialog.js"></script>
	<script src="/src/tabs.js"></script>
	<script src="/src/main.js"></script>
	<script src="/lang/zh-CN.js"></script>
	<script src="/lang/en.js"></script>
	<script src="/plugins/emoticons/emoticons.js"></script>
	<script src="/plugins/flash/flash.js"></script>
	<script src="/plugins/image/image.js"></script>
	<script src="/plugins/link/link.js"></script>
	<script src="/plugins/media/media.js"></script>
	<script src="/plugins/plainpaste/plainpaste.js"></script>
	<script src="/plugins/table/table.js"></script>
	<script src="/plugins/wordpaste/wordpaste.js"></script>
	<script src="/plugins/filemanager/filemanager.js"></script>
	<script src="/plugins/preview/preview.js"></script>
	<script src="/plugins/code/code.js"></script>
	<script src="/plugins/map/map.js"></script>
	<script src="/plugins/lineheight/lineheight.js"></script>
</head>
<style type="text/css">
	[v-cloak] {
		display: none;
	}

	.form_work {
		width: 800px;
		margin: 50px auto;
	}
</style>

<body>
	<div id="app">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="邮件信息" name="first">
				<el-form label-width="80px" class="form_work" :model="formLabelAlign">
					<!-- <el-form-item label="工单ID" v-cloak>
						<el-input :disabled="formLabelAlign.status!=0" v-model="formLabelAlign.id"></el-input>
					</el-form-item> -->
					<el-form-item label="收件人" v-cloak>
						<el-input :disabled="formLabelAlign.status!=0" v-model="formLabelAlign.toAddress"></el-input>
					</el-form-item>
					<el-form-item label="抄送" v-cloak>
						<el-input :disabled="formLabelAlign.status!=0" v-model="formLabelAlign.ccAddress"></el-input>
					</el-form-item>
					<el-form-item label="邮件主题" v-cloak>
						<el-input :disabled="formLabelAlign.status!=0" v-model="formLabelAlign.subject"></el-input>
					</el-form-item>
					<el-form-item label="邮件正文" v-cloak>
						<textarea id="mail_content" name="content" style="width:700px;height:300px;"></textarea>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<!-- <el-tab-pane label="脚本信息" name="second">
				<el-form label-width="80px" class="form_work" :model="formLabelAlign">
					<el-form-item label="脚本名称" v-cloak>
						<el-input :disabled="formLabelAlign.status!=0" v-model="formLabelAlign.scriptName"></el-input>
					</el-form-item>
					<el-form-item label="脚本用途" v-cloak>
						<textarea id="script_use" name="content" style="width:700px;height:300px;"></textarea>
						</el-input>
					</el-form-item>
					<el-form-item label="脚本内容" v-cloak>
						<textarea id="script_content" name="content" style="width:700px;height:300px;"></textarea>
					</el-form-item>
					<el-form-item v-if="formLabelAlign.planningStartTime!=null && formLabelAlign.planningEndTime!=null"
						label="有效时间" v-cloak>
						<div class="plan" style="display: flex;">
							<div class="start">
								<el-input :disabled="formLabelAlign.status!=0"
									v-model="formLabelAlign.planningStartTime">
								</el-input>
							</div>
							到
							<div class="end">
								<el-input :disabled="formLabelAlign.status!=0" v-model="formLabelAlign.planningEndTime">
								</el-input>
							</div>

						</div>

					</el-form-item>

					<el-form-item v-if="formLabelAlign.realStartTime!=null && formLabelAlign.realEndTime!=null"
						label="执行时间" v-cloak>
						<div class="run">
							<div class="start">
								<el-input :disabled="formLabelAlign.status!=0" v-model="formLabelAlign.realStartTime">
								</el-input>
							</div>到
							<div class="end">
								<el-input :disabled="formLabelAlign.status!=0" v-model="formLabelAlign.realEndTime">
								</el-input>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="执行次数" v-cloak>
						<el-input :disabled="formLabelAlign.status!=0" v-model="formLabelAlign.runs"></el-input>
					</el-form-item>
					<el-form-item v-if="formLabelAlign.sendTime!=null" label="提交时间" v-show="formLabelAlign.status!=0"
						v-cloak>
						<el-input disabled v-model="formLabelAlign.sendTime"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane> -->
			<el-tab-pane label="附件" name="third">
				<el-card class="box-card" v-for="item in formLabelAlign.appendix" :key="item.id">
					<a
						:href="'/xman/etlMail/fileDownload?fileName='+item.file_name+'&originalName='+item.original_name">{{item.originalName}}</a>

				</el-card>


			</el-tab-pane>
		</el-tabs>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			activeName: "first",
			formLabelAlign: {}
		},
		created() {
			this.getInfo();
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			getInfo() {
				var id = window.location.href.split("?id=")[1];
				var param = new FormData();
				param.append("id", id);
				axios
					.post("/xman/etlMail/detail", param)
					.then(response => {
						// console.log("response", response);
						this.formLabelAlign = response.data.data;
						if (this.formLabelAlign.planningStartTime != null) {
							this.formLabelAlign.planningStartTime = this.timeChange(
								this.formLabelAlign.planningStartTime * 1000
							);
						}
						if (this.formLabelAlign.planningEndTime != null) {
							this.formLabelAlign.planningEndTime = this.timeChange(
								this.formLabelAlign.planningEndTime * 1000
							);
						}
						if (this.formLabelAlign.sendTime) {
							this.formLabelAlign.sendTime = this.timeChange(
								this.formLabelAlign.sendTime * 1000
							);
						}

						this.formLabelAlign.appendix = eval("(" + this.formLabelAlign.appendix + ")");
						for (let i = 0; i < this.formLabelAlign.appendix.length; i++) {
							const ix = this.formLabelAlign.appendix[i];
							ix.file_name = encodeURI(ix.fileName)
							ix.original_name = encodeURI(ix.originalName)

						}
						editor1.html(this.formLabelAlign.mailBody);
						editor2.html(this.formLabelAlign.scriptUsage);
						editor3.html(this.formLabelAlign.scriptContent);
						editor1.readonly(this.formLabelAlign.status != 0);
						editor2.readonly(this.formLabelAlign.status != 0);
						editor3.readonly(this.formLabelAlign.status != 0);
					})
					.catch(function (error) {
						console.log(error);
					});


			},
			timeChange(time) {
				var item = new Date(time);
				return (
					item.toLocaleDateString().replace(/\//g, "-") +
					" " +
					item.toTimeString().substr(0, 8)
				);
			},
			download(item) {
				url = encodeURI("/xman/etlMail/fileDownload?fileName=" + item.fileName + "&originalName=" + item
					.originalName)


				axios
					.get(url)
					.then(response => {
						// console.log('response', response)
					})
					.catch(function (error) {
						console.log(error);
					});
			}
		}
	});
</script>
<script>
	KindEditor.ready(function (K) {
		window.editor1 = K.create('#mail_content');
	});
	KindEditor.ready(function (K) {
		window.editor2 = K.create('#script_use');
	});
	KindEditor.ready(function (K) {
		window.editor3 = K.create('#script_content');
	});
</script>

</html>